<template>
  <el-container>
    <el-aside class="left-aside">
      <el-menu
        :default-active="activeMenu"
        style="border: 0px"
        router
      >
        <el-menu-item
          v-for="route in routes"
          :key="route.path"
          :index="`/dashboard/${route.path}`"
          class="menu-item"
        >
          {{ route.meta.title }}
        </el-menu-item>
        <el-button class="menu-item-btn" icon="el-icon-plus" @click="addmenu"></el-button>
      </el-menu>
    </el-aside>
    <el-main>
      <transition name="fade-transform" mode="out-in">
        <keep-alive>
          <router-view/>
        </keep-alive>
      </transition>
    </el-main>
    <el-dialog
      title="添加"
      :visible.sync="centerDialogVisible"
      width="30%"
      center>
      <span>需要注意的是内容是默认不居中的</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </el-container>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'Dashboard',
  data() {
    return {
      centerDialogVisible: false,
      list: [],
      path: ''
    }
  },
  computed: {
    ...mapGetters([
      'name'
    ]),
    activeMenu() {
      const { path } = this.$route
      return '/dashboard/' + path.split('/')[2]
    },
    routes() {
      const routes = this.$router.options.routes.filter(obj => {
        if (obj.path === '/') return true
      })
      return routes[0].children[0].children
    }
  },
  methods: {
    addmenu() {
      this.centerDialogVisible = true
    }
  }
}
</script>

<style lang="scss" scoped>
.left-aside {
  width: 160px !important;
  margin-top: 5px;
  //box-shadow: 0px 0px 10px rgba(0, 0, 0, .12);
  z-index: 1;
}

.dashboard {
  &-container {
    margin: 30px;
  }
}
.menu-item {
  text-align: center;
  line-height: 40px;
  box-shadow: 0 0 6px rgba(0, 0, 0, .2);
  border-radius: 15px;
  margin: 10px auto auto;
  height: 40px;
  width: 120px;
}

.menu-item-btn {
  width: 120px;
  height: 40px;
  font-size: 16px;
  color: black;
  margin-top: 10px;
  margin-left: 20px;
  //background-color: rgba(0, 0, 0, 0);
  border-width: 0;
  box-shadow: 0 0 6px rgba(0, 0, 0, .2);
  border-radius: 15px;
}
</style>
